<script setup>
import { ref, onMounted, watch } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

const router = useRouter()
const isLoggedIn = ref(false)
const currentUser = ref(null)
const isVip = ref(false)

// 检查用户是否登录
const checkLoginStatus = () => {
  const userData = localStorage.getItem('currentUser')
  if (userData) {
    isLoggedIn.value = true
    currentUser.value = JSON.parse(userData)
    isVip.value = currentUser.value.isVip || false
  } else {
    isLoggedIn.value = false
    currentUser.value = null
    isVip.value = false
  }
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('currentUser')
  checkLoginStatus()
  router.push('/')
}

// 升级VIP - 重定向到VIP页面
const upgradeToVip = () => {
  if (isLoggedIn.value) {
    router.push('/vip')
  } else {
    router.push('/login')
  }
}

// 监听路由变化，更新登录状态
watch(
  () => router.currentRoute.value,
  () => {
    checkLoginStatus()
  }
)

// 组件挂载时检查登录状态
onMounted(() => {
  checkLoginStatus()
})</script>

<template>
  <header class="app-header">
    <div class="header-content">
      <h1 class="logo">
        <RouterLink to="/">二手交易平台</RouterLink>
      </h1>
      <nav class="nav-menu">
        <RouterLink to="/" class="nav-link">首页</RouterLink>
        <RouterLink to="/about" class="nav-link">关于我们</RouterLink>
        <RouterLink v-if="isLoggedIn" to="/vip" class="nav-link vip-link">
          <span class="vip-badge">VIP</span>
          VIP专区
        </RouterLink>
        <RouterLink v-if="!isLoggedIn" to="/login" class="nav-link">登录</RouterLink>
        <RouterLink v-if="!isLoggedIn" to="/register" class="nav-link">注册</RouterLink>
        <RouterLink v-if="isLoggedIn" to="/profile" class="nav-link">个人中心</RouterLink>
        <div v-if="isLoggedIn" class="user-info">
          <div class="user-avatar" :class="{ 'vip-avatar': isVip }">
            {{ currentUser?.username?.substring(0, 2) }}
            <span v-if="isVip" class="vip-icon">👑</span>
          </div>
          <span>{{ currentUser?.username }}
            <span v-if="isVip" class="vip-badge">VIP</span>
          </span>
        </div>
        <button v-if="isLoggedIn && !isVip" @click="upgradeToVip" class="vip-button">
          升级VIP
        </button>
        <button v-if="isLoggedIn" @click="handleLogout" class="logout-button">退出</button>
      </nav>
    </div>
  </header>
  <main class="app-main">
    <RouterView />
  </main>
  <footer class="app-footer">
    <p>© 2023 二手交易平台 - 让闲置物品流动起来</p>
  </footer>
</template>

<style scoped>
/* CSS变量定义 */
:root {
  --primary-gradient: linear-gradient(135deg, #42b983, #35495e);
  --primary-color: #42b983;
  --primary-hover: #35495e;
  --danger-color: #f44336;
  --danger-hover: #d32f2f;
  --vip-gradient: linear-gradient(135deg, #ffd700, #ff9500);
  --vip-color: #ffd700;
  --vip-dark: #ff9500;
  --text-primary: #333;
  --text-secondary: #666;
  --bg-light: #f8f9fa;
  --border-radius: 8px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --transition: all 0.3s ease;
}

.app-header {
  background: white;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: var(--transition);
}

.logo:hover {
  transform: scale(1.05);
}

.logo a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link {
  padding: 10px 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
}

.nav-link:hover {
  background-color: var(--bg-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* VIP相关样式 */
.vip-link {
  position: relative;
  color: var(--vip-dark);
  font-weight: 600;
}

.vip-link:hover {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
}

.vip-badge {
  background: var(--vip-gradient);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: super;
}

.vip-button {
  padding: 10px 20px;
  background: var(--vip-gradient);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.vip-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
  z-index: -1;
}

.vip-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.1);
}

.vip-button:hover::before {
  left: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background-color: var(--bg-light);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.user-info:hover {
  background-color: #e9ecef;
  box-shadow: var(--shadow-sm);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  position: relative;
  transition: var(--transition);
}

.vip-avatar {
  background: var(--vip-gradient);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.vip-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 16px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.logout-button {
  padding: 10px 20px;
  background-color: var(--danger-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.logout-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
  z-index: -1;
}

.logout-button:hover {
  background-color: var(--danger-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.logout-button:hover::before {
  left: 100%;
}

.app-main {
  min-height: calc(100vh - 140px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 24px;
}

.app-footer {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 30px 0;
  text-align: center;
  color: var(--text-secondary);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.app-footer p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
    height: 60px;
  }
  
  .logo {
    font-size: 22px;
  }
  
  .nav-menu {
    gap: 12px;
  }
  
  .nav-link {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .user-info {
    padding: 6px 12px;
  }
  
  .logout-button, .vip-button {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .app-main {
    padding: 20px 16px;
  }
}

@media (max-width: 576px) {
  .nav-menu {
    gap: 8px;
  }
  
  .nav-link {
    padding: 6px 8px;
    font-size: 13px;
  }
  
  .user-info {
    gap: 8px;
  }
  
  .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}
</style>
